<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>环境对象</title>
  </head>
  <body>
    <button>点我啊点我啊点我啊</button>
    <script>
      // 环境对象 this   粗略规则： 谁调用函数，this就指向谁

      // 1. 全局环境
        // console.log(this) // this 指向 window 全局对象

      // 2. 普通函数
      //   function fn() {
      //     console.log(this)
      //   }
      // //   this.fn()
      // // window.fn()
      // fn()

      // 3. 对象方法
        const obj = {
          uname: '大豪',
          sing:function() {
              console.log(this)
          }
        }
        obj.sing()
        // console.log(obj);
        

      // 4. 事件
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        console.log(this) // this 指向 btn 这个对象
        // btn.style.background = 'pink'
        this.style.background = 'green'
      })
    </script>
  </body>
</html>
